<template>
	<view class="item" @click="goDetail()">
		<view class="top_box flexV">
			<view class="logo_box">
				<image class="icon" :src="tactics.iconUrl" mode="aspectFill"></image>
			</view>
			<text class="name">{{tactics.name}}</text>
		</view>
		<view class="bottom_box flexV">
			<view class="">
				<view class="percent" v-if="tactics.return90Days<0" style="color: #F04848;">
					{{tactics.return90Days}}%
				</view>
				<view class="percent" v-else>+{{tactics.return90Days}}%</view>
				<view class="label">90天收益率</view>
			</view>
			<view class="earnings">
				<view class="percent" style="color: #26282B;">{{tactics.maxDrawdown}}%</view>
				<view class="label">最大回撤值</view>
			</view>
			<view :class="[!tactics.isPurchaseAllowed?'disabled':'']" class="btn flexHV">购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TacticsItem",
		props: {
			tactics: {
				type: Object,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goDetail() {
				const {
					isPurchaseAllowed,
					id
				} = this.tactics
				if (isPurchaseAllowed) {
					if (!getApp().verifyIsLogin()) return
					// this.toPagesIslogin("/pages/tacticsDetails/tacticsDetails?id="+id)
					const {
						riskInfo
					} = uni.getStorageSync('userInfo');
					if (this.isEmpty(riskInfo) || !riskInfo.completed) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没完成风险评估。',
							cancelText: '再看看',
							confirmText: '去评估',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/common/riskAnswer'
									})
								}
							}
						})
						return;
					}
					uni.navigateTo({
						url: "/pages/tacticsDetails/tacticsDetails?id=" + id
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		height: 184rpx;
		padding-top: 26rpx;

		.top_box {
			margin-bottom: 22rpx;

			.logo_box {
				width: 36rpx;
				height: 36rpx;
				background: #343434;
				border-radius: 18rpx;
				overflow: hidden;

				.icon {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				font-weight: 400;
				font-size: 28rpx;
				color: #26282B;
				margin-left: 16rpx;
			}
		}

		.bottom_box {
			padding-left: 52rpx;

			.percent {
				font-size: 36rpx;
				color: #06B070;
			}

			.label {
				font-weight: 400;
				font-size: 22rpx;
				color: #A6ACB4;
			}

			.earnings {
				margin: 0 auto 0 100rpx;
			}

			.btn {
				width: 140rpx;
				height: 64rpx;
				background: #FBD536;
				border-radius: 8rpx;
				font-weight: 600;
				font-size: 26rpx;
				color: #26282B;

				&.disabled {
					background-color: #D2D9E1;
					color: #A6ACB4;
				}
			}
		}
	}
</style>